/**
 * 入参
 *
 */
import React, { PropTypes, PureComponent, Fragment } from 'react';
import {
  PrimaryC,
} from '../../../../comps';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Card, Input, Button, message, Table, Divider, DatePicker, Select, Modal } from 'antd';
import style from '../index.less';
import FormItemC from './formItem';
import { connect } from 'dva';
import _, { map } from 'lodash';

const { TextArea } = Input;
const FormItem = Form.Item;
const FormItemLayout = {
  labelCol: {
    xl: { span: 10, offset: 0 },
    xxl: { span: 8, offset: 0 },
  },
  wrapperCol: {
    xl: { span: 13, offset: 0 },
    xxl: { span: 15, offset: 0 },
  },
};

class ConditionSettingC extends PureComponent {
  static defaultProps = {
    onRef: () => {},
  };
  rowRefs = [];
  state = {
    initData: [], //存放父组件给的数据
  };
  componentDidMount() {
    this.props.onRef(this);
  }
  //筛选条件组件选中/取消选中指标时，会抛出onChange事件，index主页面响应该事件，并传入该组件对象{select:‘true or fasle’, vlaue:'1-1-1',title:'指标1'，displayType:'展示类型'，initValue:[]}，该组件响应该入参变化，增加一行或删除一行
  // {indicator:'1-1-1',title:'指标1'，displayType:'展示类型'，value:[min,max]},
  responseChange = (obj, arr) => {
    //第一项时单个item,第二项是数组
    const { initData } = this.state;
    if (arr) {
      //如果是整个数组回填

      if (!arr.length) return;
      const tempRefs = [];
      arr.map((item) => {
        //找到对应的ref
        this.rowRefs.map((ref) => {
          if (Object.keys(ref)[0] == item.value) {
            tempRefs.push(ref);
          }
        });
      });
      this.setState({
        initData: [...arr],
      });
      this.rowRefs = tempRefs;
      return;
    } else {
      //单个选中项
      if (!obj) return;
      const tempArr = initData.filter((item) => item.value == obj.value);
      if (!tempArr.length) {
        //之前未选中
        initData.push(obj);
      }
      const tempData = initData.filter((item) => item.select); //选中项数组
      const tempRefs = [];
      tempData.map((item) => {
        this.rowRefs.map((ref) => {
          if (Object.keys(ref)[0] == item.value) {
            tempRefs.push(ref);
          }
        });
      });
      this.rowRefs = tempRefs;
      this.setState({
        initData: [...tempData],
      });
    }
  };
  //变成初始化状态
  reset = () => {
    this.setState({
      initData: [], //存放父组件给的数据
    });
    this.rowRefs = [];
  };
  //对外的函数，该函数中校验字段，通过校验，返回数据 将表格的数据传给父组件
  getInfo = () => {
    const arr = [];

    this.rowRefs.map((item) => {
      const rowInfo = item[Object.keys(item)[0]].getInfo();
      if (rowInfo) {
        arr.push(rowInfo);
      }
    });
    if (arr.length && arr.length == this.rowRefs.length) {
      return arr;
    } else {
      message.error('请正确填写条件设置里的内容!');
      return undefined;
    }
  };
  //点击了筛选按钮 将数据返回个父组件
  shaixuanClick = () => {
    const info = this.getInfo();
    if (info) {
      const temp = _.cloneDeep(info);
      temp.map((item) => {
        delete item.indexType;
      });
      this.props.settingInfo(temp);
    } else {
      this.props.settingInfo(undefined);
    }
  };
  //删除某一行
  delRow = (indexType, id) => {
    const { initData } = this.state;
    this.props.onChange(indexType, id, false); //通知父组件删除了一行
    const arr = initData.filter((item) => item.value != id);
    this.rowRefs = this.rowRefs.filter((item) => Object.keys(item)[0] != id);
    if (!arr.length) {
      //数组删除完通知父组件
      this.props.settingInfo(undefined);
    }
    this.setState({
      initData: [...arr],
    });
  };
  //表格展示
  showTable = () => {
    const { initData } = this.state;
    const labels = [
      { name: '筛选指标', required: false, visible: true },
      { name: '筛选方式', required: true, visible: true },
      { name: '取值', required: true, visible: true },
      { name: '操作', required: false, visible: true },
    ];
    const arr = labels.filter((item) => item.visible == true); //过滤出展示的列数
    const width = parseFloat(95 / arr.length);
    return (
      <div>
        <div className={`${style.settingTable} ${style.title}`}>
          {labels.map((item, key) => {
            return item.visible ? (
              <div
                style={{ width: item.name == '操作' ? '45px' : item.name == '取值' ? width * 2 + '%' : width + '%', textAlign: item.name == '操作' ? 'center' : 'inherit' }}
                key={key}
              >
                <span>
                  <label className={item.required ? style.lableRequire : ''}></label>
                  {item.name}
                </span>
              </div>
            ) : null;
          })}
        </div>
        {initData.length ? (
          <div className={`${style.TableArea}`}>
            {initData &&
              initData.map((item) => {
                return (
                  <FormItemC
                    key={item.value}
                    {...item}
                    delRow={this.delRow}
                    width={width}
                    onRef={(ref) => {
                      this.rowRefs.push({
                        [item.value]: ref,
                      });
                    }}
                  />
                );
              })}
          </div>
        ) : (
          <div style={{ height: '300px', textAlign: 'center', paddingTop: '100px' }}>请先选中筛选条件,加载相应数据!</div>
        )}
      </div>
    );
  };
  render() {
    const { initData } = this.state;
    return (
      <div className={style.setting}>
        <div style={{ marginBottom: '10px' }}>
          <PrimaryC disabled={initData.length ? false : true} title='筛选' onClick={this.shaixuanClick} />
        </div>
        <div>{this.showTable()}</div>
      </div>
    );
  }
}
export default connect(({ AssetPreparationM, userM: user, loading }) => ({
  AssetPreparationM,
  user,
  loading,
}))(ConditionSettingC);
